<template>
	<view>
		<view class="nav">
			<view class="navBar" v-for="(item,index) in navList" :key="index">
				<view :class="{'active':isActive == index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view>
			<block v-for="(item1, index1) in commentList" :key="index1">
				<view class="comment">
					<view class="item1">
						<image :src="item1.touxiang"></image>
						<text style="margin-left: 15rpx;">{{item1.name}}</text>
						<text style="margin-right: 30rpx;margin-left: auto;">{{item1.date}}</text>
					</view>
					<view class="item2">{{item1.content}}</view>
					<view class="item3">
						<image :src="item1.productImg"></image>
						<view class="product-info">
							<view style="font-size: 28rpx;color: #1B1B1B;">{{item1.productName}}</view>
							<view style="font-size: 24rpx;color: #666666;">规格一规格一</view>
						</view>
						<view style="margin-top: 120rpx;font-size: 24rpx;color: #666666;">共{{item1.num}}件 合计：￥{{item1.price}}</view>
					</view>
					<view  class="huifu">
						<text>回复</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			isActive:1,
			navList:[
				{
					index:0,
					title:'最新评论'
				},
				{
					index:1,
					title:'全部评论'
				},
				{
					index:2,
					title:'全部差评'
				}
			],
		    commentList:[
				{
					touxiang: require("@/static/logo.png"),
					name:'zzhzhang',
					date:'2019.10.10',
					content:'第二次购买了，爽滑不腻，而且还很新鲜，我家小宝贝也喜欢 拦着一次可以吃一大盘。快递也很给力，可能知个已经很',
					productImg: require("@/static/meat.png"),
					productName: '商品名称商品名称商品',
					num:1,
					price:586
				},
				{
					touxiang: require("@/static/logo.png"),
					name:'zzhzhang',
					date:'2019.10.10',
					content:'第二次购买了，爽滑不腻，而且还很新鲜，我家小宝贝也喜欢 拦着一次可以吃一大盘。快递也很给力，可能知个已经很',
					productImg: require("@/static/meat.png"),
					productName: '商品名称商品名称商品',
					num:1,
					price:586
				}
			]
		}
	},
	methods:{
		checked(index){
			this.isActive = index
		}
	}
}
</script>
<style>
	page {
		background: rgb(245, 245, 245);
	}
	.nav {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.navBar {
		height: 80rpx;
		line-height: 80rpx;
		/* text-align: center; */
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1B1B1B;
	}
	.active {
		position: relative;
	}
	.active::after {
		content: '';
		position: absolute;
		width: 60rpx;
		height: 6rpx;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		background: #000000;
		margin: auto;
	}
    .comment {
		padding-top: 30rpx;
		margin-top: 30rpx;
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		font-family: Source Han Sans CN;
		font-weight: 400;
	}
	.item1 {
		margin-left: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 24rpx;
		color: #999999;
	}
	.item1 image{
		width: 58rpx;
		height: 58rpx;
		border-radius: 50%;
	}
	.item2 {
		font-size: 24rpx;
		color: #666666;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}
	.item3 {
		display: flex;
		flex-direction: row;
		margin: 14rpx 30rpx 28rpx 30rpx; 
		width: 670rpx;
		height: 176rpx;
		background: #F9F9F8;
		border-radius: 10rpx;
		padding-left: 20rpx;
		padding-top: 24rpx;
	}
	.item3 image{
		width: 148rpx;
		height: 148rpx;
	}
	.product-info {
		margin-left: 13rpx;
	}
	.huifu {
		font-size: 28rpx;
		color: #999999;
		margin-top: 31rpx;
		padding-bottom: 31rpx;
		margin-left: 666rpx;
	}
</style>
